@import "@{root-path}/base/variables.less";
@import "@{root-path}/base/mixins.less";

.accordion {
    margin: 0;
    padding: 0;
    list-style: none;
    h3 {
        color: @white;
        margin: 0;
    }
    a {
        display: block;
        background-color: @light-grey;
        color: @black;
        padding: .5rem;
        border: 1px solid @dark-grey;
        text-decoration: none;
        &:focus,
        &:active {
            background-color: @light-grey;
            color: @black;
            border: 1px solid @dark-grey;
            outline: none;
        }
    }
    p {
        margin: 0;
        padding: .5rem;
    }
    .content-pane {
        background-color: @white;
        color: @black;
        border: 1px solid @dark-grey;
        border-top: 0;
        overflow: hidden;
        height: 0;
        opacity: 0;
        transition: opacity .5s;
        h3 {
            color: @dark-grey;
            padding: .5rem 1rem;
        }
        h4 {
            padding: 0.5rem 1rem 0 .5rem;
            font-size: 1.2rem;
        }
    }
    .show {
        height: auto;
        opacity: 1;
    }
    [data-icon]:before {
        float: right;
        font-family: 'icons';
        /* ensure inherited styles does not override the font style here. */
        font-style: normal;
        content: attr(data-icon);
        .rotate(0);
        /* @see http://css-tricks.com/examples/IconFont/ */
        speak: none;
    }
    [aria-expanded="true"] {
        [data-icon]:before {
            .rotate(-90deg);
        }
    }
}
